<template>
  <div class="container">
    <div style="background-color: #f6f6f6;height: 70px;">
      <div style="margin: 0 auto;width: 50%; height:100%; display: flex;align-items: center">
        <img src="@/assets/imgs/logo.png" alt="" style="width: 50px">
        <span style="font-weight: bold;font-size: 24px;margin-left: 5px">文艺共鸣</span>
      </div>
    </div>
    <div
        style="margin: 0 auto;width: 50%;height: calc(100vh - 70px); display: flex; grid-gap:20px; align-items: center">
      <div style="flex: 1">
        <img style="width: 100%" src="@/assets/imgs/background.webp" alt="">
      </div>
      <div style="flex: 1">
        <div style="width: 350px; padding: 50px 30px; background-color: #f6f6f6; border-radius: 5px;">
          <div style="text-align: center; font-size: 20px; margin-bottom: 20px; color: #333">欢 迎 注 册</div>
          <el-form :model="form" :rules="rules" ref="formRef">
            <el-form-item prop="username">
              <el-input prefix-icon="el-icon-user" placeholder="请输入账号" v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input prefix-icon="el-icon-lock" placeholder="请输入密码" show-password
                        v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item prop="confirmPass">
              <el-input prefix-icon="el-icon-lock" placeholder="请输入确认密码" show-password
                        v-model="form.confirmPass"></el-input>
            </el-form-item>
            <el-form-item prop="name">
              <el-input prefix-icon="el-icon-view" placeholder="请输入昵称" v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item prop="email">
              <el-input prefix-icon="el-icon-message" placeholder="请输入邮箱" v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item prop="emailCode">
              <div style="display: flex; width: 100%">
                <el-input prefix-icon="el-icon-refresh" placeholder="请输入验证码" style="flex: 1" v-model="form.emailCode" clearable></el-input>
                <el-button style="width: 120px; margin-left: 5px" @click="sendEmail" :disabled="time > 0">点击发送<span
                    v-if="time">（{{ time }}）</span></el-button>
              </div>
            </el-form-item>
            <el-form-item prop="phone">
              <el-input prefix-icon="el-icon-phone" placeholder="请输入电话号码" v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button style="width: 100%; background-color: #333; border-color: #333; color: white"
                         @click="register">注 册
              </el-button>
            </el-form-item>
            <div style="display: flex; align-items: center">
              <div style="flex: 1"></div>
              <div style="flex: 1; text-align: right">
                已有账号？请 <a href="/login">登录</a>
              </div>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    const reg_email = /^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/
    const checkEmail = (rule, value, callback) => {
      if (!reg_email.test(value)) {  // test可以校验你的输入值
        return callback(new Error('邮箱格式不合法'));
      }
      callback()
    }
    const reg_phone = /^[1][3，4，5，6，7，8，9][0-9]{9}$/
    const checkPhone = (rule, value, callback) => {
      if (!reg_phone.test(value)) {
        return callback(new Error('电话格式不合法'));
      }
      callback()
    }
    // 验证码校验
    const validatePassword = (rule, confirmPass, callback) => {
      if (confirmPass === '') {
        callback(new Error('请确认密码'))
      } else if (confirmPass !== this.form.password) {
        callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    }
    return {
      form: {role: 'USER'},
      rules: {
        username: [
          {required: true, message: '请输入账号', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ],
        confirmPass: [
          {validator: validatePassword, trigger: 'blur'}
        ],
        email: [
          {required: true, message: '请输入邮箱', trigger: 'blur'},
          {validator: checkEmail, trigger: 'blur'}
        ],
        emailCode: [
          {required: true, message: '请输入邮箱验证码', trigger: 'blur'},
        ],
        phone: [
          {required: true, message: '请输入电话号码', trigger: 'blur'},
          {validator: checkPhone, trigger: 'blur'}
        ],
        name: [
          {required: true, message: '请设置昵称', trigger: 'blur'}
        ]
      },
      time:0,
      intervalId: null
    }
  },
  created() {

  },
  methods: {
    register() {
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          // 验证通过
          this.$request.post('/register', this.form).then(res => {
            if (res.code === '200') {
              this.$router.push('/login')  // 跳转登录页面
              this.$message.success('注册成功')
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    times() {
      // 清除之前的定时器
      if (this.intervalId) {
        clearInterval(this.intervalId);
      }
      this.time = 60; // 重置倒计时时间
      this.intervalId = setInterval(() => {
        if (this.time > 0) {
          this.time--;
        }
      }, 1000);
    },
    sendEmail() {
      const reg = /^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/
      if (!reg.test(this.form.email)) {  // test可以校验你的输入值
        this.$message.warning("请输入合法的邮箱")
        return
      }
      this.$request.get("/email", {
        params: {
          email: this.form.email,
          type: "REGISTER",
        }
      }).then(res => {
        if (res.code === '200') {
          this.times()  // 倒计时
          this.$message.success('发送成功，有效期5分钟')
        } else {
          this.$message.error(res.msg)
        }
      })
    },
  }
}
</script>

<style scoped>
.container {
  height: 100vh;
  overflow: hidden;
  background-color: white;

}

a {
  color: #2a60c9;
}
</style>